.box{
    width: 100%;
    height: 300px;
    box-shadow: 0px 0px 10px pink;
    border-radius: 10px;
    overflow: hidden;
}
/* 滚动的 */
.box-inner{
    position: absolute;
    /* 宽度等于父元素的高度 */
    width: var(--h);       
    /* 高度等于父元素的宽度 */
    height: var(--w);
    transform-origin:0 0;
    transform:translateY( var(--h)) rotate(-90deg);
    position: relative;
    overflow: auto;
    scroll-behavior: smooth;
}
/* 内容区域 */
.box-inner-content{
    width: auto;
    /* 高度不可以随父元素的高；要是最外层的高box */
    height:var(--h);
    position: absolute;
    left: 100%;
    transform-origin: 0 0;
    /* 用于显示内容的；角度旋转90deg -90 - 90 = 0 恢复到正常 */
    transform: rotate(90deg);
}
.box-inner::-webkit-scrollbar{
    width: 0px;
}
.content{
    display: inline-flex;
    height: 100%;
}
.content img{
    height: 100%;
    display: block;
    font-size: 0px;
    border-radius: 10px;
}
.content img+img{
    margin-left: 20px;
}

.card-item{
    height: 100%;
    width: 300px;
    background-color: skyblue;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-item+
.card-item{
    margin-left: 20px;
}